"use client"

import { useState, useEffect } from "react"
import { Progress } from "@/components/ui/progress"

interface PasswordStrengthProps {
  password: string
}

// 密码强度指示器组件，用于可视化展示密码的安全强度
export function PasswordStrength({ password }: PasswordStrengthProps) {
  const [strength, setStrength] = useState(0)
  const [feedback, setFeedback] = useState("")

  useEffect(() => {
    if (!password) {
      setStrength(0)
      setFeedback("")
      return
    }

    // 计算密码强度
    let score = 0

    // 长度检查
    if (password.length >= 8) score += 20

    // 字符多样性检查
    if (/[A-Z]/.test(password)) score += 20 // 包含大写字母
    if (/[a-z]/.test(password)) score += 20 // 包含小写字母
    if (/[0-9]/.test(password)) score += 20 // 包含数字
    if (/[^A-Za-z0-9]/.test(password)) score += 20 // 包含特殊字符

    setStrength(score)

    // 根据分数设置反馈信息
    if (score < 40) {
      setFeedback("弱密码")
    } else if (score < 80) {
      setFeedback("中等强度密码")
    } else {
      setFeedback("强密码")
    }
  }, [password])

  // 根据强度确定颜色
  const getColorClass = () => {
    if (strength < 40) return "text-red-500"
    if (strength < 80) return "text-yellow-500"
    return "text-green-500"
  }

  if (!password) return null

  return (
    <div className="space-y-1 mt-1">
      <Progress value={strength} className="h-1" />
      <p className={`text-xs ${getColorClass()}`}>{feedback}</p>
    </div>
  )
}

